<template>
	<!-- menu -->
	<div class="menu">
		<!-- logo -->
		<div class="index-logo">
			<img class="index-logo-img" src="@/assets/img/elove_logo.png">
			<p class="index-logo-title">{{ $t("dr") }} E-LOVE</p>
		</div>
		<!-- 展开按钮 -->
		<div class="show-menu-btn">
			<img @click="toggleMenu" class="show-menu-img" src="@/assets/img/nav_column_collapse.png">
		</div>
		<!-- tab -->
		<ul v-bind:class="[isShowMenu == true ? 'show-menu' : '', 'index-menu-tab']">
			<li class="menu-tab-item" 
				v-for="(tab, index) in menuTabList" 
				:key="index" 
				@mouseenter="enter(index)" 
				@mouseleave="leave()"
			 	@click="tabClick(index,tab)"
			>
				<img v-if="mathCurrentTabIndex == index" class="tab-item-icon" :src="tab.imgUrlClick">
				<img v-else-if="tabHoverIndex === index && mathCurrentTabIndex != index" class="tab-item-icon" :src="tab.imgUrlActive">
				<img v-else class="tab-item-icon" :src="tab.imgUrl">
				<p v-bind:class="[mathCurrentTabIndex == index ? 'menu-highlight' : '', 'tab-item-text']">{{ $t(tab.text) }}</p>
			</li>
		</ul>
		
		<div class="con"></div>
		<!-- menu-msg -->
		<div class="index-menu-user">
			<div class="us" @click="userNameClick">
				<img class="user-icon" src="@/assets/img/avatar.png" alt="user">
				<div class="user-id">{{userName}}</div>
				<img class="user-arrow" src="@/assets/img/down_gray.png" alt="arrow">
                <!--展开信息-->
                <div class="user-msg-select" v-if="isShowUserMsg">
                    <div class="arrow"></div>
                    <ul class="user-msg-selectList">
                        <!-- <li>修改密码</li> -->
                        <li @click="logout">退出</li>
                    </ul>
                </div>
			</div>
			<div class="msg-fl msg-font1">当前登录地区：</div>
			<div class="msg-fl msg-font2">大陆</div>
			<div v-for="(lang,index) in langList" :key="index" v-bind:class="[index === currentLang ? 'langactive' : '',lang.langs, 'langs']"
			 @click="changeLang(lang.langs,index)">
				{{ lang.name }}
			</div>
		</div>
	</div>
</template>

<script>
	import route from '@/router';
	import { menuTabListData, langListData } from './datas.js'
	import { DRcookie } from '@/assets/js/common.js'
	export default {
		name: 'topmenu',
		data() {
			return {
				isShowUserMsg: false,
				isShowMenu: false,
				tabHoverIndex: '',
				currentLang: 0,
				langList: langListData,
				menuTabList: menuTabListData
			}
		},
		computed: {
			lang() {
				return this.$t('lang')
			},
			mathCurrentTabIndex() {
				let currentTabIndex;
				this.menuTabList.map((ele, index) => {
					if (this.$route.fullPath.indexOf(ele.tabName) != -1) {
						currentTabIndex = index
					}
				})
				return currentTabIndex
			},
			// 拿到登录后返回的权限列表
			listConfig() {
				return JSON.parse(localStorage.getItem('menuInfoList'))
			},
			userName() {
				return DRcookie.get('userName')
			}
		},
		methods: {
			// 关于权限
			listControl() {
				let arr = []
				this.menuTabList = []
				let availableList = []
				if(!Array.isArray(this.listConfig)) {
					this.$message({
						message: '没有列表权限'
					})
                    this.$router.replace({name: 'login'})
                    return
                }
				// 筛选出可用的一级目录
				this.listConfig.forEach(item => {
					if (item.parent_id === 200) {
						menuTabListData.forEach(ele => {
							if (ele.tabName === item.menu_url) {
								this.menuTabList.push(ele)
								availableList.push(item)
							}
						})
					}
				})
			},
			changeLang: function(langs, index) {
				langs === 'simplified' ? this.$i18n.locale = 'zh' : this.$i18n.locale = 'zhTw';
				this.currentLang = index;
			},
			enter: function(index) {
				this.tabHoverIndex = index;
			},
			leave: function() {
				this.tabHoverIndex = '';
			},
			tabClick: function(index, tab) {
				route
				this.$router.push({
					name: tab.tabName
				})
			},
			toggleMenu: function() {
				this.isShowMenu = !this.isShowMenu;
			},
			userNameClick() {
				this.isShowUserMsg = !this.isShowUserMsg;
			},
			logout() {
				const Authorization = `${DRcookie.get('tH')} ${DRcookie.get('tF')}`; //tH是token头部,tF是尾部
				this.$ajax({
						url: `${api.base}/ulogout`,
						method: 'POST',
						data: {},
						headers: {
							"Content-Type": 'application/json',
							'Accept': 'application/json',
							Authorization: Authorization
						},
						withCredentials: true
					})
					.then(response => {
						const data = response.data;
						if (data.status === 200 && data.result) {
							this.$message({
								message: '退出成功',
								type: 'success'
							})
							DRcookie.delete('tH')
							DRcookie.delete('tF')
							DRcookie.delete('userName')
							this.$router.replace({
								name: 'login'
							})
						} else {
							this.$message({
								message: data.result.msg,
								type: 'error'
							})
						}
					})
			}
		},
		created() {
			this.listControl();
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	.us {
		cursor: pointer;
		display: flex;
        align-items: center;
        position: relative;
	}

    /*个人信息展开*/
    .user-msg-select{
        position: absolute;
		top: 56px;
		right: -20px;
        z-index: 999;
        background-color: #fff;
		border-radius: 6px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
        width: 140px;
    }
    .user-msg-select .arrow {
		width: 0;
		height: 0;
		border-width: 0 5px 10px;
		border-style: solid;
		border-color: transparent transparent #fff;
		top: -10px;
		right: 20px;
		position: absolute;
	}
	.user-msg-selectList li {
		width: 100%;
		height: 36px;
		font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "华文细黑", STHeiti, MingLiu, 'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #444444;
		padding-left: 16px;
		box-sizing: border-box;
		line-height: 36px;
		cursor: pointer;
		box-shadow: inset 0px -1px 0px 0px #eeeeee;
	}

	.user-msg-selectList li:hover {
		background-color: #e9e9e9;
	}

	.user-msg-selectList li:last-child {
		border-radius: 0 0 6px 6px;
	}

	.menu {
		width: 100%;
		height: 80px;
		background-color: #222222;
		display: flex;
		position: relative;
	}

	.index-logo {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.index-logo-img {
		display: block;
		width: 40px;
		height: 40px;
		margin-right: 8px;
		margin-left: 20px;
	}

	.index-logo-title {
		font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "华文细黑", STHeiti, MingLiu, 'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #ffffff;
		display: none;
	}

	.index-menu-tab {
        display: block;
        overflow: hidden;  /*暂时解决换行问题，待上线修改*/
	}

	.menu-tab-item {
		height: 100%;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		cursor: pointer;

	}

	.menu-tab-item .tab-item-text {
		font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "华文细黑", STHeiti, MingLiu, 'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #bbbbbb;
		margin-top: 8px;
	}

	.menu .menu-tab-item .menu-highlight {
		color: #fefefe;
	}

	.index-menu-user {
        position: relative;
		display: flex;
		align-items: center;
		width: 342px;
	}

	.user-icon {
		display: block;
		width: 32px;
		height: 32px;
		margin-left: 11px;
		border-radius: 50%;
	}

	.user-id {
		font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "华文细黑", STHeiti, MingLiu, 'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #bbbbbb;
		margin-left: 8px;
		display: none;
	}

	.msg-font1 {
		margin-left: 23px;
	}

	.simplified {
		margin-left: 24px;
	}

	.user-arrow {
		display: block;
		width: 10px;
		height: 6px;
		margin-left: 15px;
		cursor: pointer;
	}

	.msg-fl {
		font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "华文细黑", STHeiti, MingLiu, 'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #888888;
	}

	.langs {
		width: 32px;
		height: 24px;
		border-radius: 12px;
		text-align: center;
		line-height: 24px;
		font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "华文细黑", STHeiti, MingLiu, 'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #888888;
		cursor: pointer;
	}

	.traditional {
		margin-left: 5px;
	}

	.langactive {
		background-color: #7e6b5a;
		color: #fff;
	}

	.show-menu-btn {
		display: none;
		width: 24px;
		height: 100%;
		margin-left: 9px;
		position: relative;
	}

	.show-menu-btn .show-menu-img {
		width: 24px;
		height: 20px;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		margin-top: auto;
		margin-bottom: auto;
	}

	/* ***************************************************************sm 768px*/
	@media screen and (min-width:768px) and (max-width: 991px) {		
		.index-logo {
			width: 96px;
		}

		.show-menu-btn {
			display: block;
			flex: 1;
		}

		.menu .show-menu {
			display: block;
		}

		.index-menu-tab {
			width: 100%;
			min-height: 80px;
			z-index: 99;
			top: 80px;
			position: absolute;
			background-color: #222;
			opacity: 0.9;
			display: none;
			padding-left: 80px;
			box-sizing: border-box;
		}

		.menu-tab-item {
			width: 80px;
			height: 80px;
			float: left;
			margin-left: 0;
			margin-right: 16px;
		}

		.menu-tab-item:nth-child(5) {
			width: 88px;
		}

	}

	/* ***************************************************************md屏 992px*/

	@media screen and (min-width:992px) and (max-width: 1200px) {
		.index-logo {
			width: 96px;
		}

		.show-menu-btn {
			display: block;
			flex: 1;
		}

		.index-menu-tab {
			width: 100%;
			min-height: 80px;
			top: 80px;
			position: absolute;
			z-index: 99;
			background-color: rgb(34, 34, 34, .9);
			display: none;
			padding-left: 80px;
			box-sizing: border-box;
		}

		.menu-tab-item {
			width: 80px;
			height: 96px;
			float: left;
			margin-left: 0;
			margin-right: 16px;
		}

		.menu-tab-item:nth-child(5) {
			width: 88px;
		}

		.menu .show-menu {
			display: block;
		}

	}

	/* *************************************************************** */
	/* @media screen and (min-width:1201px) and (max-width: 1607px) {
		.menu-tab-item {
			width: 80px;
			margin-left: 0;
		}

		.index-menu-tab {
			display: flex;
			flex: 1;
			justify-content: space-around;
		}

		.con {
			flex: 1;
		}

		.index-menu-user {
			width: 400px;
		}

		.user-id {
			display: block;
		}

		.menu-tab-item:nth-child(5) {
			width: 88px;
		}

	} */

	/* *******************************************************************/
	@media screen and (min-width: 1200px) {
		.index-logo {
			width: 210px;
		}

		.con {
			flex: 1;
		}

		.user-id {
			display: block;
		}

		.index-logo-img {
			margin-left: 24px;
		}

		.index-logo-title {
			display: block;
		}

		.menu-tab-item:nth-child(5) {
			width: 88px;
		}

		.menu-tab-item {
			width: 80px;
			margin-left: 24px;
		}

		.menu-tab-item:first-child {
			margin-left: 0;
		}

		.index-menu-user {
			width: 400px;
		}

		.user-icon {
			margin-left: 7px;
		}

		.msg-font1 {
			margin-left: 47px;
		}

		.simplified {
			margin-left: 31px;
		}

	}
</style>
